<!DOCTYPE html>
<html lang="en">

<head>
    <title> 骨骼创建 </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- 3D 库 -->
    <script src="../库/babylon.max.js"></script>
    <style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
    <script>
        var $ = {};
        // 元素创建代码
        // 骨骼官方资料: https://doc.babylonjs.com/how_to/how_to_use_bones_and_skeletons
        var element = function (scene) {
            // 设置颜色
            var myMaterial = new BABYLON.StandardMaterial("myMaterial", scene);
            myMaterial.diffuseColor = BABYLON.Color3.Blue();
            // 创建方块
            var box1 = BABYLON.MeshBuilder.CreateBox("box0", {
                size: 5
            }, scene);
            box1.material = myMaterial;
            // 创建方块
            var box2 = BABYLON.MeshBuilder.CreateBox("box1", {
                size: 5
            }, scene);
            box2.material = myMaterial;
            box2.parent = box1;// 设置父对象
            // 创建方块
            var box3 = BABYLON.MeshBuilder.CreateBox("box2", {
                size: 5
            }, scene);
            box3.material = myMaterial;
            box3.parent = box2; // 设置父对象
            // 创建骨架
            var Skeleton = new BABYLON.Skeleton("根骨骼", "-1", scene);
            // 创建骨骼
            var bone1 = new BABYLON.Bone("box1", Skeleton);
            var bone2 = new BABYLON.Bone("box2", Skeleton, bone1);
            // 修改骨骼位置
            bone1.setPosition({ x: 10, y: 0, z: 10 })
            bone2.setPosition({ x: 10, y: 10, z: 0 })
            // 添加骨骼
            box2.attachToBone(bone1, box1);
            box3.attachToBone(bone2, box1);
            // 设置骨架
            box1.skeleton = Skeleton;
            // 调试骨骼
            var skeletonViewer = new BABYLON.Debug.SkeletonViewer(Skeleton, box1, scene);
            // 修改骨骼颜色
            skeletonViewer.isEnabled = true;
            skeletonViewer.color = BABYLON.Color3.Red();
        }
        // 测试代码
        window.addEventListener('DOMContentLoaded', function () {
            // 获得元素
            var canvas = document.getElementById('renderCanvas');
            // 创建渲染
            var engine = new BABYLON.Engine(canvas, true);
            // 隔离创建
            var scene = (function () {
                // 创建一个基本的Scene对象，用来容纳所有其他对象
                var scene = new BABYLON.Scene(engine);
                // 创建一个相机，设置其位置为
                var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 20, -10), scene);
                // 相机聚焦在场景原点位置
                camera.setTarget(BABYLON.Vector3.Zero());
                // 使得我们可以控制相机拍摄角度，和three.js中的OrbitsControl效果类似，但简单得多
                camera.attachControl(canvas, false);
                camera.position.y = 10;
                camera.position.z = -40;
                camera.rotation.x = -0.1;
                camera.rotation.y = 0;
                // 创建模型
                element(scene)
                // 创建地面”形状；其构造函数的5个参数和球体一样
                var ground = BABYLON.Mesh.CreateGround('ground1', 600, 600, 2, scene);
                //ground.physicsImpostor = new BABYLON.PhysicsImpostor(ground, BABYLON.PhysicsImpostor.BoxImpostor, {
                //	//ground should stay in place
                //	mass: 0
                //});
                //ground.receiveShadows = true;
                //ground.checkCollisions = true;
                // 返回 Scene对象一个半球形光源,朝向为天空
                var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);
                return scene;
            })();
            // 循环渲染
            engine.runRenderLoop(function () {
                scene.render();
            });
            //追加事件：帆布与大小调整程序
            window.addEventListener('resize', function () {
                engine.resize();
            });
        });
    </script>
</head>

<body>
    <canvas id="renderCanvas"></canvas>
</body>

</html>